今天我們要針對任務清單上半部的「管理主任務」、「新增子任務」的操作按鈕進行實作，這邊會使用到的元件是 Modal（彈跳視窗 / 對話框）。

1. 先來認識 Modal 元件

在 Web UI 中，Modal 是一個相當常見的互動元件。可以在不離開當前頁面的情況下，跳出一個獨立的對話方塊來處理輸入、確認或提示等任務。

常見使用場景

• 表單輸入：如新增資料、編輯內容。

• 重要確認：如刪除警告、警告提示。

• 資訊展示：如條款聲明、詳細規格說明。

基礎結構解析

一個完整的 Modal 結構主要由三個部分組成：

1. modal-header（標題與關閉按鈕）

2. modal-body（主要內容區域）

3. modal-footer（操作按鈕區）。

<!-- 1. 觸發按鈕 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  開啟 Modal 視窗
</button>

<!-- 2. Modal 本體 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 標題區 -->
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">視窗標題</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <!-- 內容區（可套用 Grid 系統） -->
      <div class="modal-content-body p-3">
        這裡放置主要內容...
      </div>
      
      <!-- 底部按鈕區 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">確認儲存</button>
      </div>
    </div>
  </div>
</div>

其他功能與開發注意事項

1. 靜態背景（Static Backdrop）：
   如果不希望使用者點擊背景遮罩時誤關閉視窗，可以在 .modal 上加入 data-bs-backdrop="static" 與 data-bs-keyboard="false"。
   這樣使用者就必須透過點擊取消或確認按鈕才能關閉視窗，適合用於重要資料填寫或刪除確認。

2. 支援 Grid System 網格系統：
   在 modal-body 內部可以自由套用 .container-fluid 與 .row / .col-* 網格系統，讓彈窗內的表單排版更有彈性。

3. 避免多重 Modal 疊加（UX 留意點）：
   Bootstrap 官方 不支援同時開啟多個 Modal（一次只支援一個視窗）。雖然可以透過點擊轉換到下一個 Modal，但同時重疊開啟多個 Modal 會嚴重影響使用者體驗與遮罩樣式，因此需要避免使用這樣的設計。

(參考資料：Bootstrap 5 components-Modal)

實作 1：新增子任務的互動視窗

了解基礎結構後，先來製作「新增子任務」的 Modal 彈窗。

操作流程設計

1. 點擊「新增子任務」按鈕。

2. 跳出 Modal，使用者選擇「歸屬主任務」。

3. 輸入「子任務名稱」。

4. 點選「建立子任務」按鈕。

5. 觸發回應（跳出新增成功提示，或顯示已存在相同名稱的錯誤提示）。

切版要點

首先在主頁面的「新增子任務」按鈕加上 data-bs-toggle="modal" 與 data-bs-target="#addSubtaskModal" 屬性。

接著修改 Modal 內容，在 modal-body 中結合 Dropdown（下拉選單） 來選擇主任務，並使用 Input Group（輸入框組） 讓使用者輸入。

(新增子任務實作成果)

實作 2：管理主任務的互動視窗

「管理主任務」按鈕則包含新增、修改名稱與刪除

各功能流程拆解

1. 新增主任務：
   在頂部的 Input 輸入框填入名稱 ➔ 點選「新增」按鈕 ➔ 觸發回應（新增成功 / 提示名稱重複）。

2. 修改任務名稱：
   在現有任務列表中，點擊該任務旁邊的 鉛筆 Icon ➔ 編輯名稱

3. 刪除主任務：
   點擊該任務旁邊的 垃圾桶 Icon ➔ 跳出第二次確認視窗（提示此動作無法還原）：

• 點擊取消：回到剛才的管理視窗。

• 點選確認刪除：顯示「已刪除成功」的 Toast 提示 ➔ 返回管理視窗（並確認該任務已成功移除）。

(管理主任務實作成果)

小結

加上 Modal 的切版後，任務清單頁面也告一段落了，明天再把最後一部分做好，切版的部分就完成了。